<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { mdRoutes } from '@/router'

const router = useRouter()

// 默认导航路径（第一个子目录）
const defaultDocsPath = ref('')

const features = ref([
  {
    title: '知识管理',
    description: '系统化的知识整理与管理，让学习更加高效',
    icon: '📚',
  },
  {
    title: '多领域覆盖',
    description: '涵盖技术、生活、学习、职业等多个领域',
    icon: '🌐',
  },
  {
    title: '响应式设计',
    description: '适配各种设备，随时随地访问您的知识库',
    icon: '📱',
  },
  {
    title: '便捷导航',
    description: '清晰的目录结构，快速找到所需内容',
    icon: '🧭',
  },
])

// 简单的导航函数
const navigateTo = (path: string) => {
  // 确保路径以斜杠结尾
  const normalizedPath = path.endsWith('/') ? path : `${path}/`
  router.push(normalizedPath)
}

// 获取第一个docs目录下的直接子目录
const getFirstDocsPath = () => {
  // 从路由配置中找到第一个/docs/下的直接子目录
  const firstDocRoute = mdRoutes.find((route) => {
    const path = route.path
    // 检查是否是docs路径且是直接子目录（路径深度为3）
    const isDocsPath = path.startsWith('/docs/') && path.split('/').length === 3
    // 检查是否不是编码路径（名称不以-encoded结尾）
    const notEncoded = !route.name?.toString().endsWith('-encoded')

    return isDocsPath && notEncoded
  })

  // 如果没有找到直接子目录，尝试查找所有docs路径
  if (!firstDocRoute) {
    const allDocsRoutes = mdRoutes.filter((route) => {
      const path = route.path
      return path.startsWith('/docs/') && !route.name?.toString().endsWith('-encoded')
    })

    if (allDocsRoutes.length > 0) {
      return allDocsRoutes[0].path
    }
  }

  // 确保返回有效的路径
  if (!firstDocRoute) {
    throw new Error('无法找到docs目录下的子目录')
  }

  return firstDocRoute.path
}

// 设置默认导航路径
const setDefaultDocsPath = () => {
  defaultDocsPath.value = getFirstDocsPath()
}

// 组件挂载时设置默认路径
onMounted(() => {
  setDefaultDocsPath()
})
</script>

<template>
  <div class="home-page">
    <div class="hero">
      <h1 class="title">欢迎来到我的知识库</h1>
      <p class="description">一个系统化的知识管理与分享平台</p>
      <div class="actions">
        <button class="action-button primary" @click="navigateTo(defaultDocsPath)">开始探索</button>
        <button class="action-button secondary" @click="navigateTo('/about')">了解更多</button>
      </div>
    </div>

    <div class="features">
      <div v-for="(feature, index) in features" :key="index" class="feature-card">
        <div class="feature-icon">{{ feature.icon }}</div>
        <h3 class="feature-title">{{ feature.title }}</h3>
        <p class="feature-description">{{ feature.description }}</p>
      </div>
    </div>

    <div class="content-section">
      <h2 class="section-title">如何使用本知识库</h2>
      <div class="usage-steps">
        <div class="step">
          <div class="step-number">1</div>
          <div class="step-content">
            <h3>浏览目录</h3>
            <p>通过左侧边栏浏览不同领域的知识分类，找到您感兴趣的主题。</p>
          </div>
        </div>
        <div class="step">
          <div class="step-number">2</div>
          <div class="step-content">
            <h3>阅读内容</h3>
            <p>点击进入具体文章，右侧目录可以帮助您快速定位到感兴趣的部分。</p>
          </div>
        </div>
        <div class="step">
          <div class="step-number">3</div>
          <div class="step-content">
            <h3>移动端体验</h3>
            <p>在移动设备上，通过导航栏下方的控制按钮可以访问侧边栏和目录。</p>
          </div>
        </div>
      </div>
    </div>

    <div class="content-section">
      <h2 class="section-title">知识领域</h2>
      <div class="knowledge-areas">
        <div class="area-card" @click="navigateTo('/docs/技术领域')">
          <h3>技术领域</h3>
          <p>前端开发、后端开发、人工智能等技术相关内容</p>
        </div>
        <div class="area-card" @click="navigateTo('/docs/生活领域')">
          <h3>生活领域</h3>
          <p>美食烹饪、旅行摄影、健康养生等生活相关内容</p>
        </div>
        <div class="area-card" @click="navigateTo('/docs/学习领域')">
          <h3>学习领域</h3>
          <p>学习方法、技能培养、知识管理等学习相关内容</p>
        </div>
        <div class="area-card" @click="navigateTo('/docs/职业发展')">
          <h3>职业发展</h3>
          <p>求职技巧、职业规划、职场技能等职业相关内容</p>
        </div>
        <div class="area-card" @click="navigateTo('/docs/创意艺术')">
          <h3>创意艺术</h3>
          <p>视觉艺术、文学写作、音乐创作等艺术相关内容</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.home-page {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
    'Helvetica Neue', sans-serif;
}
.hero {
  text-align: center;
  padding: 4rem 0;
}

.title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #1f2937;
}

.description {
  font-size: 1.5rem;
  color: #4b5563;
  margin-bottom: 2rem;
}

.actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.action-button {
  padding: 0.75rem 2rem;
  border-radius: 0.375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.action-button.primary {
  background-color: #4b5563;
  color: white;
}

.action-button.primary:hover {
  background-color: #374151;
}

.action-button.secondary {
  background-color: transparent;
  color: #4b5563;
  border: 1px solid #4b5563;
}

.action-button.secondary:hover {
  background-color: #f3f4f6;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin: 4rem 0;
}

.feature-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  padding: 2rem;
  text-align: center;
  transition: all 0.2s ease;
}

.feature-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.feature-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.feature-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #1f2937;
}

.feature-description {
  color: #6b7280;
}

.content-section {
  margin: 4rem 0;
}

.section-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
  text-align: center;
  color: #1f2937;
}

.usage-steps {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.step-number {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #4b5563;
  color: white;
  border-radius: 50%;
  font-weight: 600;
  flex-shrink: 0;
}

.step-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #1f2937;
}

.step-content p {
  color: #4b5563;
}

.knowledge-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.area-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.area-card:hover {
  border-color: #d1d5db;
  background-color: #f9fafb;
}

.area-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #1f2937;
}

.area-card p {
  color: #4b5563;
}

@media (max-width: 768px) {
  .home-page {
    padding: 1rem;
  }

  .hero {
    padding: 2rem 0;
  }

  .title {
    font-size: 2rem;
  }

  .description {
    font-size: 1.2rem;
  }

  .actions {
    flex-direction: column;
    align-items: center;
  }

  .features {
    grid-template-columns: 1fr;
  }

  .knowledge-areas {
    grid-template-columns: 1fr;
  }
}
</style>
